//数据渲染
// ********************************************************
$(function() {
    $.ajax({
        url: './data/index.json',
        type: 'get',
        dataType: 'json',
        success: function(data) {
            var dix = data['index'];
            // console.log(dix);
            var goods_2 = `<div class="tu1"><img src="${dix[0].imgurl}" alt=""></div>
            <p class="word w5">${dix[0].title}</p>
            <a href="./goodslist.html" class="a"><div class="shop s4 data-id="${dix[0].id}">点击购买</div></a>
            <div class="y1">
                <div><img src="./imgs/y1.jpg" alt=""></div>
                <p>手袋</p>
                <p>GG Multicolor系列融合多种缤纷色彩</p>
                <p>更多 ></p>
            </div>
            <div class="y2">
                <div><img src="./imgs/y2.jpg" alt=""></div>
                <p>外套&飞行员夹克</p>
                <p>无边序曲系列的全新GG Multicolor系列，打造炫目拼色效果</p>
                <p>更多 ></p>
            </div>
            <div class="y3">
                <div><img src="./imgs/y3.jpg" alt=""></div>
                <p>半裙</p>
                <p>GG Multicolor系列为典藏设计带来全新可能</p>
                <p>更多 ></p>
            </div>`
            $('.second').append(goods_2);
            var goods_1 = `
            <div class="tu2"><img src="${dix[1].imgurl}" alt=""></div>
            <div class="y4">
                <div><img src="./imgs/y5.jpg" alt=""></div>
                <p>GG Multicolor系列</p>
                <p>双G标识以缤纷色彩重新演绎</p>
                <p>更多 ></p>
            </div>
            <p class="word w5">${dix[1].title}</p>
            <a href="./goodslist.html" class="a"><div class="shop s4" data-id="${dix[1].id}">点击购买</div></a>`
            $('.three').append(goods_1);


        }
    })
})
var mySwiper = new Swiper('.swiper-container', {
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        //   direction: 'vertical', // 垂直切换选项
        autoplay: true,
        autoplay: {
            disableOnInteraction: false,
        },
        loop: true, // 循环模式选项


        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            clickableClass: 'my-pagination-clickable',

        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        //   scrollbar: {
        //       el: '.swiper-scrollbar',
        //       hide: true,
        //   },
    })
    //包包360度旋转
var rotate = document.querySelector('.rotate');
var img = document.querySelector('.tu img');
var t = 10;
rotate.onclick = function() {
        t++;
        if (t == 11) {
            t = 1;
        }
        img.src = `./imgs/x${t}.jpg`;

    }
    //登录框显示
var $login = $('.login');
var $show = $('.show');
var flag = 0;
$show.hide();
$login.mouseover(function() {
    $show.animate({ top: '60px', opacity: 'show' });
});

$login.mouseout(function() {
    $show.animate({ opacity: 'hide', top: '90px' });
});